<div class="variants-main-container" id="variants-<?= $this->getId() ?>">
	<div class="variants-items" data-delete-message="<?= trans('summer.shop::lang.messages.delete_unique') ?>">
		<?php foreach ($variants as $key => $variant): ?>
			<?= $this->makePartial('variant-partial', ['variant' => $variant, 'vr_key' => $key]) ?>
		<?php endforeach ?>
	</div>

	<a href="#" class="btn btn-primary btn-sm oc-icon-plus" data-variant-new>
		<?= trans('summer.shop::lang.messages.add_variant') ?>
	</a>

	<div class="variants-enable-first">
		<svg width="128" height="128" viewBox="0 0 32 32" version="1.1" fill="#5e5e5e">
			<g id="surface1" fill="#5e5e5e">
				<path style=" " d="M 9 7 C 8.378906 7 7.773438 7.066406 7.1875 7.1875 C 6.894531 7.246094 6.59375 7.320313 6.3125 7.40625 C 3.792969 8.203125 1.742188 10.085938 0.71875 12.5 C 0.605469 12.769531 0.492188 13.03125 0.40625 13.3125 C 0.136719 14.164063 0 15.058594 0 16 C 0 16.929688 0.144531 17.8125 0.40625 18.65625 C 0.410156 18.664063 0.402344 18.679688 0.40625 18.6875 C 1.203125 21.207031 3.085938 23.257813 5.5 24.28125 C 5.769531 24.394531 6.03125 24.507813 6.3125 24.59375 C 7.164063 24.863281 8.058594 25 9 25 L 23 25 C 27.957031 25 32 20.957031 32 16 C 32 11.042969 27.957031 7 23 7 Z M 9 9 C 12.878906 9 16 12.121094 16 16 C 16 19.878906 12.878906 23 9 23 C 5.121094 23 2 19.878906 2 16 C 2 15.757813 2.007813 15.515625 2.03125 15.28125 C 2.386719 11.742188 5.363281 9 9 9 Z M 14.625 9 L 23 9 C 26.878906 9 30 12.121094 30 16 C 30 19.878906 26.878906 23 23 23 L 14.625 23 C 16.675781 21.347656 18 18.828125 18 16 C 18 13.171875 16.675781 10.652344 14.625 9 Z " fill="#5e5e5e" />
			</g>
		</svg>
		<h1><?= trans('summer.shop::lang.messages.enable_variants') ?></h1>
		<p><?= trans('summer.shop::lang.messages.enable_variants_comment') ?></p>
	</div>

	<input name="<?= $this->fieldName ?>" class="form-control variants-field" type="hidden" />
</div>